
<template>
  <div id="app">
    <div id="Map" ref="mapObj"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, Feature } from "ol";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Style, Stroke, Icon } from "ol/style";
import { LineString, Point, Polygon } from "ol/geom";
import XYZ from "ol/source/XYZ";
import trackCar from "@/assets/lineData.json";

import { onMounted, ref } from "vue";
import areaGeo from "@/assets/bianjie.json";


export default {
  name: "shadow",
  setup() {
    console.log("trackCar", trackCar)
    let map = null;
    let vectorLayer = null;
    const addTrack = () => {
      // 根据经纬度点位创建线
      var routeFeature = new Feature({
        type: "route",
        geometry: new LineString(trackCar).transform("EPSG:4326", "EPSG:3857"),
      });
      // 创建开始图标
      const startMarker = new Feature({
        type: "startMarker",
        geometry: new Point(trackCar[0]).transform("EPSG:4326", "EPSG:3857"),
      });
      // 创建结束图标
      const endMarker = new Feature({
        type: "endMarker",
        geometry: new Point(trackCar[trackCar.length - 1]).transform(
          "EPSG:4326",
          "EPSG:3857"
        ),
      });
      // 设置样式
      var styles = {
        // 如果类型是 route 的样式
        route: new Style({
          stroke: new Stroke({
            width: 2, //线的宽度
            color: "#ffc641", //线的颜色
          }),
        }),
        // 如果类型是 geoMarker 的样式
        startMarker: new Style({
          image: new Icon({
            src: require("@/assets/123.gif"),
            anchor: [0.5, 1.1], // 设置偏移
          }),
        }),
        endMarker: new Style({
          image: new Icon({
            src: require("@/assets/logo.png"),
            anchor: [0.5, 1.1], // 设置偏移
          }),
        }),
      };
      // 把小车和线添加到图层
      vectorLayer = new VectorLayer({
        source: new VectorSource({
          features: [routeFeature, startMarker, endMarker],
        }), //线,起点的图标,终点的图标
        style: function (feature) {
          return styles[feature.get("type")];
        },
      });
    }

    const initMap = () => {
      const target = "Map"; // 跟页面元素的 id 绑定来进行渲染
      const tileLayer = [
        new TileLayer({
          source: new XYZ({
            url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
          }),
          projection: "EPSG:3857",
        }),
        vectorLayer, //把线,起点,终点的图标加载到图层
      ];
      map = new Map({
        target: target, // 绑定dom元素进行渲染
        layers: tileLayer, // 配置地图数据源
      });
      map
        .getView()
        .fit(new Polygon([trackCar]).transform("EPSG:4326", "EPSG:3857"), {
          padding: [100, 100, 100, 100],
        }); //设置地图的缩放距离离屏幕的大小
    }


    onMounted(() => {
      addTrack();
      initMap();
    })



    return {

    }
  }
};
</script>

<style lang='scss' scoped>
#app,
#Map {
  height: 90vh;
}
</style>
